<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas Table</title>
  <script src="js/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="css/jquery-ui.min.css">
  <!-- 引入 jQuery UI -->
  <script src="js/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="cellstyle.css">
  <link rel="stylesheet" href="css/tableCss.css">
  <link rel="stylesheet" href="css/selectLineStyle.css">
  


  <script src="jsonData.js"></script>
  <script type="module" src="js/displayData.js"></script>
  <script src="tableData2.js"></script>
  <script src="js/paraData.js"></script>

</head>
<body>

<!-- 看不见的输入框 -->
<div id="editableDiv" contenteditable="true" ></div>
<!-- 背景辅助层，有于画线，禁用事件 -->
<canvas id="backgroundCanvas"></canvas>
<!-- 文字模板层，用于普通文字，图片显示，在适当时候开始事件 -->
<canvas id="textCanvas"></canvas>
<!-- 表格绘制图层，用于表格绘制-->
<canvas id="myCanvas" width="800" height="9850"></canvas>
<canvas id="ceache-canvas" width="800" height="2955"></canvas> <!-- 这是隐藏的大画布 -->
<div id="cell-dialog" title="单元格属性设置" style="display:none;">


  <div class="dialog-instructions">
      请点击单元格边，设定单元格边线是否显示
  </div>
  <div class="cell" id="cell">
      <div class="edge" id="cell-edge"></div>
  </div>
  <div class="dialog-actions">
      <button id="cancel-button">取消</button>
      <button id="confirm-button">确定</button>
  </div>
</div>




<div class="navbar">
      <div class="menu right-border" data-target="Files" id="Main_File_fileButton">文件...</div>
      <div class="menu right-border" data-target="about">关于智简</div>
      <div class="icon-button" id="undo">
        <img src="imgs/cancel_w.png" alt="撤销" id="undo">
        
      </div>
      <div class="icon-button" id="redo">
        <img src="imgs/redo_w.png" alt="重做">
        
      </div>

      <div class="icon-button" id="redo">
        <img src="imgs/savetocloud.png" alt="保存">
        
      </div>


      
      <div class="menu left-border" data-target="start">开始</div>
      <div class="menu" data-target="insert">表格</div>
      <div class="menu" data-target="mTable">分表管理</div>
      <div class="menu" data-target="reference">引用</div>
      <div class="menu" data-target="view">视图</div>
      <div class="menu" data-target="tools">工具</div>
</div>



<ul id="Main_File_fileMenu" class="Main_File_menu">
    <li class="Main_File_icon-new">新建
        <ul class="Main_File_submenu">
            <li class="Main_File_icon-doc">文档</li>
            <li class="Main_File_icon-img">图片</li>
        </ul>
    </li>
    <li class="Main_File_icon-open">打开</li>
    <li class="Main_File_icon-save">保存</li>
    <li class="Main_File_icon-save-as">另存为
        <ul class="Main_File_submenu">
            <li class="Main_File_icon-pdf">PDF</li>
            <li class="Main_File_icon-img">图片</li>
        </ul>
    </li>
    <li class="Main_File_icon-close">关闭</li>
</ul>



<div class="submenu-container"  id="navBar_sbu_001">
  <div class="submenu" id="about">智简System : 一键智简，多部门联动一次收件，智能分发，助力政务高效一体！！</div>
  <div class="submenu2" id="start">
 
    <div class="button-container">
       <div class="areaBox">
        <div class="div1">
                           
                
                          <select id="fontSelector" ></select>                         
                          <select id="fontSizeSelector"></select>

                          <button class="menu-item" id="incFontSize" data-action="incFontSize">
                              <img src="imgs/font-add.png" alt="字体加大" class="icon">
                          </button>

                          <button class="menu-item" id="minFontSize" data-action="minFontSize">
                              <img src="imgs/font-minus.png" alt="字体减小" class="icon">
                          </button>

                          <button class="menu-item" id="eraser_font">
                              <img src="imgs/eraser.png" alt="清除格式" class="icon">
                          </button>
        </div>     
          
              <div class="div2" id="font_style">    
                  <button class="menu-item" id="Bold"  data-action="setBold">           
                      <img src="imgs/Bold.png" alt="字体加粗" class="icon">
                  </button>

                  <button class="menu-item" id="italic"  data-action="italicOn" >
                      <img src="imgs/italic.png" alt="斜体" class="icon">
                    </button>

                    <button class="menu-item" id="underline"  data-action="underLine">  
                      <img src="imgs/underline.png" alt="下刬线" class="icon">
                    </button>

                    <button class="menu-item" id="deleteline"  data-action="deleteline">  
                      <img src="imgs/deleteLineOnMid.png" alt="删除线" class="icon">
                    </button>

                    <button class="menu-item" id="sign-up" data-action="sign-up">  
                      <img src="imgs/sign-up.png" alt="上标" class="icon">
                    </button>

                    <button class="menu-item" id="selectLineStyle_openDialog"   data-action="selectLineStyle_openDialog">  
                      <img src="imgs/artstyle.png" alt="字体样式" class="icon">
                    </button>

                    <button class="menu-item" id="selectLineColor_openDialog">  
                      <img src="imgs/highlight.png" alt="下线线颜色" class="icon" >
                    </button>

                    <button class="menu-item" id="set_fontcolor">  
                      <img src="imgs/fontcolor.png" alt="字体颜色" class="icon">
                    </button>

                    <button class="menu-item" id="fontshading"  data-action="backgroundColor">  
                      <img src="imgs/fontshading.png" alt="字体底纹" class="icon">   
                    </button>

              </div>
       
          <div class="fontAreaTitle">字体</div>
      
     </div> 




      <div class="divider"></div>
    
      <div class="areaBox">
        <div class="div1">
              <button class="menu-item" id="addindent" data-action="addindent">
                  <img src="imgs/addindent.png" alt="增加缩进" class="icon">
              </button>
              <button class="menu-item" id="minusindent" data-action="minusindent">
                  <img src="imgs/minusindent.png" alt="减少缩进" class="icon">
              </button>
              <button class="menu-item" id="valign_top" data-action="valign_top">
                <img src="imgs/valign_top.png" alt="垂直居顶" class="icon">
              </button>

              <button class="menu-item" id="valign_midd" data-action="valign_midd">
                <img src="imgs/valign_midd.png" alt="项目符号" class="icon">
              </button>

              <button class="menu-item" id="valign_bottom" data-action="valign_bottom">
                <img src="imgs/valign_bottom.png" alt="编辑符号显示" class="icon">
              </button>

              <button class="menu-item" id="tab_flag" data-action="tab_flag">
                <img src="imgs/tab.png" alt="制表位" class="icon">
              </button>
          </div>

          <div class="div2">
              <button class="menu-item" id="left_align" data-action="left_align">
                  <img src="imgs/left_align.png" alt="左对齐" class="icon">
              </button>
              <button class="menu-item" id="midd_align"  data-action="midd_align">
                  <img src="imgs/midd_align.png" alt="居中" class="icon">
              </button>
              <button class="menu-item" id="right_align"  data-action="right_align">
                <img src="imgs/right_align.png" alt="右对齐" class="icon">
              </button>

              <button class="menu-item" id="justify_align"  data-action="justify_align">
                <img src="imgs/justify.png" alt="两端对齐" class="icon">
              </button>

              <button class="menu-item" id="lineheight"   data-action="lineheight">
                <img src="imgs/lineheight.png" alt="行距" class="icon">
              </button>

              <button class="menu-item" id="v_center"   data-action="v_center">
                <img src="imgs/v_center.png" alt="单元格边样式" class="icon">
              </button>
        </div>


      
          <div class="fontAreaTitle">段落</div>
      </div>
      </div>
  
    </div>
    



  <div class="submenu" id="insert">
 
      <div class="button-container">
    
      
              <div class="menu-group" id="group-row-column">
                  <div class="buttons">
                      <button class="menu-item" id="show_insert_table">
                          <img src="imgs/insert_table.png" alt="绘制表格" class="icon">绘制表格
                      </button>
                      <button class="menu-item" id="addRow">
                          <img src="imgs/insertr.png" alt="插入行" class="icon">插入行
                      </button>
                      <button class="menu-item" id="addCol">
                          <img src="imgs/insertc.png" alt="插入列" class="icon">插入列
                      </button>
                      <button class="menu-item" id="deleteLastRow">
                          <img src="imgs/deleteRow.png" alt="删除行" class="icon">删除行
                      </button>
                      <button class="menu-item" id="deleteLastColumn">
                          <img src="imgs/deleteCol.png" alt="删除列" class="icon">删除列
                      </button>
                  </div>
          			<div class="group-title">行和列</div>
      </div>
      
      <div class="divider"></div>
      
      <div class="menu-group" id="group-merge-split">
          <div class="buttons">
              <button class="menu-item" id="MergeCells">
                  <img src="imgs/merge.png" alt="合并单元格" class="icon">合并单元格
              </button>
              <button class="menu-item" id="splitCells">
                  <img src="imgs/split.png" alt="拆分单元格" class="icon">拆分单元格
              </button>
              <button class="menu-item" id="setCell">
                <img src="imgs/cell_style.png" alt="设置单元格" class="icon">单元格边样式
            </button>

            <button class="menu-item" id="hasCheckCtrl">
              <img src="imgs/has_check_ctrl.png" alt="设置单元格" class="icon">单元格选控件
          </button>
            
          </div>
          <div class="group-title">合并拆分</div>
      
      
      
        </div>
       
  </div>
 
</div>

<div class="submenu" id="mTable">
 
  <div class="button-container">

  
          <div class="menu-group" id="group-row-column">
              <div class="buttons">
                  <button class="menu-item" id="show_subTab_manager">
                      <img src="imgs/sub_table.png" alt="分表列表" class="icon">分表管理
                  </button>
                  <button class="menu-item" id="subTab_ctrl">
                      <img src="imgs/table_ctrl.png" alt="分表控件" class="icon">分表控件
                  </button>
                  <button class="menu-item" id="select_line_for_Tab">
                      <img src="imgs/slect_row.png" alt="运行表单" class="icon">运行表单
                  </button>
             
              </div>
            <div class="group-title">分表管理</div>
  </div>
  
  <div class="divider"></div>
  
  <div class="menu-group" id="group-merge-split">
      <div class="buttons">
          <button class="menu-item" id="tab_program">
              <img src="imgs/index_title.png" alt="编程" class="icon">表索引管理
          </button>
          <button class="menu-item" id="var_manage">
              <img src="imgs/var_flag.png" alt="变量" class="icon">表变量管理
          </button>
        
      </div>
      <div class="group-title">表格编程</div>
  
  
  
    </div>
   
</div>

</div>

</div>


<div id="cursorCoordinates"></div>

<canvas id="canvasPopup" class="canvas-popup" width="300" height="520"></canvas>

<canvas id="menuCanvas" width="150" height="100" style="display: none; position: absolute; z-index: 5;"></canvas>

<button id="mag_tab_open-dialog" style="display:none;"></button>

    <div id="mag_tab_dialog" title="分表管理">
        <button id="mag_tab_add-table">增加子表</button>
        <div class="list-box-container">
          <div class="mag_tab_list-box" id="mag_tab_table1">
            <table>
              <thead>
                <tr><th>序号</th><th>分表名称</th><th>删除</th><th>修改</th> <th>增加行</th></tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
          <div class="mag_tab_list-box" id="mag_tab_table2">
            <table>
              <thead>
                <tr><th>序号</th><th>行号</th><th>删除</th></tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    
    <div id="mag_tab_add-subtable-dialog" title="增加子表" style="display: none;">
        <form id="mag_tab_add-subtable-form">
          <label for="mag_tab_subtableName">名称：</label>
          <input type="text" id="mag_tab_subtableName" name="subtableName"><br><br>
          <input type="button" id="mag_tab_confirm-add-subtable" value="确认">
        </form>
      </div>

<div id="selectLineStyle_dialog" class="selectLineStyle_dialog">
  <br>
  <button id="selectLineStyle_straightLine"></button>
  <button id="selectLineStyle_doubleLine"></button>
  <button id="selectLineStyle_wavyLine"></button>
  <button id="selectLineStyle_noLine"></button>  
</div>

<!--多行文本行距选择-->

<div id="modalLSS">
  <ul id="lineSpacingOptionsLSS">
    <li data-value="1.0">1.0</li>
    <li data-value="1.5">1.5</li>
    <li data-value="2.0">2.0</li>
    <li data-value="3.0">3.0</li>
  </ul>
</div>

<div id="selectLineColor_dialog" class="selectLineColor_dialog">
  <button id="selectLineColor_black"></button>
  <button id="selectLineColor_red"></button>
  <button id="selectLineColor_green"></button>
  <button id="selectLineColor_noColor"></button>
</div>

<!-- 隐藏的颜色选择器 -->
<input type="color" id="hidden-color-picker" style="display: none;">


<canvas id="cellsCanvas" width="800" height="400"></canvas>
<div class="canvas-container" id="canvas-container">
  <div class="main_canvas" id="main_canvas">
      <!-- 页面内容将通过JS动态添加 -->
  </div>
</div>

<div id="CellsEditMenu" class="CellsEditMenu">
   <ul>
       <li id="copy">复制</li>
       <li id="paste">粘贴</li>
   </ul>
</div>


</body>




<script src="js/tableRender4.js"></script>
<script src="js/cellsEdit4.js"></script>

</html>
